<template>
  <page-header-wrapper>
    <a-card :bordered="false" v-show="$store.state.WFStore.TypesIsShow2">
      <h3 class="title">发证管理</h3>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索">
                <a-input v-model="queryParam.keyword" placeholder="输入编号、姓名、手机等" />
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="领证有效期">
                <!-- <a-date-picker @change="onChangeDate" placeholder="请选择日期" v-model="queryParam.date1" /> -->
                <a-range-picker @change="changeRange1" :placeholder="['开始时间', '结束时间']" v-model="date1" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="证件有效期">
                <!-- <a-date-picker @change="onChangeDate" placeholder="请选择日期" v-model="queryParam.date2" /> -->
                <a-range-picker @change="changeRange2" :placeholder="['开始时间', '结束时间']" v-model="date2" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="发证方式">
                <a-select style="width: 120px" v-model="queryParam.work_way">
                  <a-select-option value="0"> 全部 </a-select-option>
                  <a-select-option v-for="(v, i) in statusList.work_way_status_list" :key="i" :value="i">
                    {{ v }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="证件状态">
                <a-select style="width: 120px" v-model="queryParam.status">
                  <a-select-option value="0"> 全部 </a-select-option>
                  <a-select-option v-for="(v, i) in statusList.work_status_list" :key="i" :value="i">
                    {{ v }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="(!advanced && 8) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <div class="table-operator-left">
          <!-- <span>操作</span>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 签发 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 拒签 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 关闭 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 停用 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 启用 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 延期 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 作废 </a-button> -->
        </div>
        <a-button type="primary" @click="visible = true">新增发证</a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :alert="false"
        showPagination="auto"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">详情</a>
            <a-divider type="vertical" />
            <a v-for="(v, i) in record.operation" :key="i" style="margin-right: 8px" @click="changeOpe(record, v)">{{
              operationData[v]
            }}</a>

            <!-- 
            <a @click="handleEdit(record)">发证</a>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">拒签</a> 
            -->
          </template>
        </span>
      </s-table>
    </a-card>
    <!-- 新增发证弹窗 -->
    <a-modal v-model="visible" title="选择证件模板" footer class="modal" :width="700">
      <a-input-search
        placeholder="搜索模板名称"
        style="width: 200px"
        v-model="queryParam2.template_name"
        @search="$refs.table2.refresh(true)"
      />
      <s-table
        ref="table2"
        size="default"
        rowKey="id"
        :columns="columns2"
        :data="loadData2"
        :alert="false"
        showPagination="auto"
        class="modal-table"
        :pageSize="5"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleChoice(record)" v-if='record.operation'>选择</a>
          </template>
        </span>
      </s-table>
    </a-modal>
    <!-- 详情弹窗 -->
    <a-modal v-model="visible2" title="签发证件详情" footer class="modal" :width="850">
      <a-spin tip="Loading..." :spinning="detailSpin">
        <a-row type="flex" justify="space-between" align="top">
          <a-col :span="12">
            <a-card :bordered="false" class="qz-details">
              <div class="qz-details-div">
                <span>证件名称</span>
                <span>{{ detailData.card_name }}</span>
              </div>
              <div class="qz-details-div">
                <span>{{ detailData.card_key_one }}</span>
                <span>{{ detailData.card_content_one }}</span>
              </div>
              <div class="qz-details-div">
                <span>{{ detailData.card_key_two }}</span>
                <span>{{ detailData.card_content_two }}</span>
              </div>
              <div class="qz-details-div">
                <span>{{ detailData.card_key_three }}</span>
                <span>{{ detailData.card_content_three }}</span>
              </div>
              <div class="qz-details-div">
                <span>手机号码</span>
                <span>{{ detailData.phone }}</span>
              </div>
              <div class="qz-details-div">
                <span>领证方式</span>
                <span>{{ detailData.work_way }}</span>
              </div>
              <div class="qz-details-div">
                <span>领证状态</span>
                <span>{{ detailData.status_name }}</span>
              </div>
              <div class="qz-details-div">
                <span>领证有效期至</span>
                <span>{{ detailData.failure_ts }}</span>
              </div>
              <div class="qz-details-div">
                <span>证件状态</span>
                <span>{{ detailData.cart_status_name }}</span>
              </div>
              <div class="qz-details-div">
                <span>领证时间</span>
                <span>{{ detailData.apply_for_date ? detailData.apply_for_date : '-' }}</span>
              </div>
              <div class="qz-details-div">
                <span>证件有效期</span>
                <span>{{
                  (detailData.card_effective_date ? detailData.card_effective_date : '') +
                  '-' +
                  (detailData.card_effective_date ? detailData.failure_ts : '')
                }}</span>
              </div>
            </a-card>
          </a-col>
          <a-col :span="11">
            <certificate-style-one
              :formData="detailData"
              :qianz="detailData.company_seal ? true : false"
              :imgvalue="detailData.company_seal"
              :isName="true"
            />
          </a-col>
        </a-row>
        <div style="text-align: center" v-show="opera">
          <!-- <a-button
            type="primary"
            style="margin-right: 20px; width: 100px"
            v-for="(v, i) in opera.operation"
            :key="i"
            @click="changeOpe(opera, v)"
          >
            {{ operationData[v] }}</a-button
          > -->
          <a-button type="primary" style="width: 100px" @click="visible2 = false">关闭</a-button>
        </div>
      </a-spin>
    </a-modal>
    <!-- 新增发证切换页 -->
    <a-card :bordered="false" v-show="!$store.state.WFStore.TypesIsShow2">
      <h3 class="title">新增发证 <span>可使用证件模板向对方发放工作证件，支持扫码领证</span></h3>
      <NewsDetail2 :template_id="template_id" />
    </a-card>

    <!-- 列表按钮确认弹窗 -->
    <a-modal
      v-model="btnVisible"
      title="确认提示"
      class="btnModal"
      :width="400"
      okText="确定"
      cancelText="取消"
      @ok="btnConfirm"
    >
      <p
        v-show="
          btnVisibleData.status == 'close' || btnVisibleData.status == 'fail' || btnVisibleData.status == 'invalid'
        "
      >
        确认{{ operationData[btnVisibleData.status] }}？{{
          operationData[btnVisibleData.status]
        }}后该证件不可使用，且不可恢复
      </p>
      <p v-show="btnVisibleData.status == 'stop'">
        确认{{ operationData[btnVisibleData.status] }}？{{
          operationData[btnVisibleData.status]
        }}后该证件不可使用，启用后才可重新恢复使用
      </p>
      <p v-show="btnVisibleData.status == 'success'">
        确认{{ operationData[btnVisibleData.status] }}？{{ operationData[btnVisibleData.status] }}后该证件即刻生效
      </p>
      <div class="btnModal-delay" v-show="btnVisibleData.status == 'delay'">
        <p>请选择证件延期日期</p>
        <a-date-picker @change="delayChangeDate" placeholder="选择延期日期" />
      </div>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getTemplateList, certList, certInfo, certcertUp, getCertStatusList } from '@/api/news'
import certificateStyleOne from '@/components/certificateStyle/certificateOne'

import NewsDetail2 from './NewsDetail2'
import moment from 'moment'

const columns = [
  {
    title: '证件编号',
    dataIndex: 'work_card_id',
  },
  {
    title: '证件名称',
    dataIndex: 'card_name',
    scopedSlots: { customRender: 'card_name' },
  },
  {
    title: '领证人',
    dataIndex: 'nick_name',
    scopedSlots: { customRender: 'nick_name' },
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    scopedSlots: { customRender: 'phone' },
  },
  {
    title: '发证方式',
    dataIndex: 'work_way_name',
    scopedSlots: { customRender: 'work_way_name' },
  },
  {
    title: '领证有效期至',
    dataIndex: 'send_code_date',
    scopedSlots: { customRender: 'send_code_date' },
  },
  {
    title: '状态',
    dataIndex: 'status_name',
    scopedSlots: { customRender: 'status_name' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    // width: '130px',
    scopedSlots: { customRender: 'action' },
  },
]
const columns2 = [
  {
    title: '模版ID',
    dataIndex: 'id',
  },
  {
    title: '证件模版名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '领证有效期至',
    dataIndex: 'send_code_end',
    scopedSlots: { customRender: 'send_code_end' },
  },
  {
    title: '证件有效期至',
    dataIndex: 'card_end',
    scopedSlots: { customRender: 'card_end' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'NewsList',
  components: {
    STable,
    Ellipsis,
    NewsDetail2,
    certificateStyleOne,
  },
  data() {
    this.columns = columns
    return {
      // create model
      visible: false,
      visible2: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { work_way: '0', status: '0' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.queryParam.template_card_start =
          this.date2.length > 0 ? moment(this.date2[0]._d).format('YYYY-MM-DD') + ' 00:00:00' : ''
        this.queryParam.template_card_end =
          this.date2.length > 0 ? moment(this.date2[1]._d).format('YYYY-MM-DD') + ' 23:59:59' : ''
        this.queryParam.template_start =
          this.date1.length > 0 ? moment(this.date1[0]._d).format('YYYY-MM-DD') + ' 00:00:00' : ''
        this.queryParam.template_end =
          this.date1.length > 0 ? moment(this.date1[1]._d).format('YYYY-MM-DD') + ' 23:59:59' : ''
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        requestParameters.status = this.queryParam.status == '0' ? '' : this.queryParam.status

        console.log(requestParameters)
        return certList(requestParameters).then((res) => {
          console.log(res)
          if (res.data.list) {
            res.data.list.forEach((v) => {
              if (v.operation) {
                v.operation = v.operation.split(',').filter((v) => {
                  // v == ('success' || 'fail')
                  // return v == 'success' || v == 'fail'
                  return v
                })
              }
            })
            return res.data
          } else {
            return {
              count: 0,
              list: [],
            }
          }
        })
      },
      loadData2: (parameter) => {
        console.log(this.queryParam2)
        const requestParameters = Object.assign({}, parameter, this.queryParam2)
        return getTemplateList(requestParameters).then((res) => {
          if (res.data.list) {
            return res.data
          } else {
            return {
              count: 0,
              list: [],
            }
          }
        })
      },
      columns2: columns2,
      selectedRowKeys: [],
      queryParam2: {},
      template_id: null,
      date1: [],
      date2: [],
      detailData: {},
      detailSpin: false,
      operationData: {
        success: '签发',
        fail: '拒签',
        close: '关闭',
        stop: '停用',
        enable: '启用',
        delay: '延期',
        invalid: '作废',
      },
      opera: {},
      statusList: {},
      btnVisible: false,
      btnVisibleData: {
        record: {},
        status: '',
      },
    }
  },
  created() {},
  mounted() {
    console.log(this.$route.query)
    // if (this.$route.query.id) {
    //   this.isShow = false
    // }
    this.getstatus()
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    isShow2() {
      return this.$store.state.WFStore.TypesIsShow2
    },
  },
  watch: {
    isShow2: function (newData, oldData) {
      if (newData) {
        this.$refs.table.refresh(true)
      }
    },
  },
  methods: {
    // 详情按钮
    handleEdit(record) {
      this.visible2 = true
      this.detailSpin = true
      this.opera = record
      this.detailData = {}
      certInfo({
        id: record.id,
        company_id: '0',
      })
        .then((res) => {
          console.log(res)
          if (res.data.user_pic) {
            // res.data.user_pic = process.env.VUE_APP_API_BASE_URL2 + res.data.user_pic
            res.data.user_pic = window.location.protocol + '//' + window.location.host + res.data.user_pic
          }
          if (res.data.company_seal) {
            res.data.company_seal = window.location.protocol + '//' + window.location.host + res.data.company_seal
          }

          this.detailData = res.data
          this.detailSpin = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 重置按钮
    handleReset() {
      this.queryParam = { work_way: '0', status: '0' }
      this.date1 = []
      this.date2 = []
      this.$refs.table.refresh(true)
    },
    // 选择列表项
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    onChangeDate(value) {
      console.log(value)
      console.log(this.queryParam)
    },
    // 表格头部炒作按钮
    start() {
      this.loading = true
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
      }, 1000)
    },
    // 弹窗选择
    handleChoice(scope) {
      this.visible = false
      this.template_id = scope.id
      this.$router.push({ name: 'NewsList', query: { isShow2: 1, id: scope.id } })
    },
    // 日期选择
    changeRange1(v) {
      this.date1 = v
      console.log(this.date1)
    },
    changeRange2(v) {
      this.date2 = v
      console.log(this.date2)
    },
    // 炒作改变状态
    changeOpe(record, status) {
      // 如果是延期的话弹出延期弹窗
      if (status == 'enable') {
        this.certUpdata(record, status)
      } else {
        this.btnVisibleData = {
          record: {},
          status: '',
        }
        this.btnVisibleData.record = record
        this.btnVisibleData.status = status
        this.btnVisible = true
      }
    },
    // 列表操作按钮弹窗的点击确认按钮
    btnConfirm(arg) {
      let { record, status } = this.btnVisibleData
      this.certUpdata(record, status)
    },
    // 修改表格状态
    certUpdata(record, status) {
      console.log(record, status)
      let param = {
        id: record.id,
        status: status,
      }
      if (record.failure_ts) {
        param.failure_ts = record.failure_ts
      }
      certcertUp(param)
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.visible2 = false
            this.$refs.table.refresh(true)
            this.btnVisible = false
            this.$message.success(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 延期日期改变
    delayChangeDate(value) {
      let failure_ts = moment(value).format('YYYY-MM-DD') + ' 23:59:59'
      this.btnVisibleData.record.failure_ts = failure_ts
    },
    // 获取状态列表
    getstatus() {
      getCertStatusList({})
        .then((res) => {
          console.log(res)
          this.statusList = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  span {
    font-size: 12px;
    margin-left: 10px;
    color: #999;
  }
}
.table-operator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding-top: 20px;
  &-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    span {
      margin-right: 10px;
    }
  }
}
.modal {
  &-table {
    margin-top: 10px;
  }
}
.zjStyle {
  width: 335px;
  box-sizing: border-box;
  &-content {
    background: #ffffff;
    box-shadow: 3px 3px 7px 3px rgba(8, 8, 8, 0.1);
    border-radius: 10px;
    overflow: hidden;
    header {
      height: 22px;
      background: #0579fe;
    }
    input {
      border: none;
      font-size: 16px;
    }
    &-main {
      padding: 0 32px 0 31px;
      position: relative;
      .threeinput {
        font-size: 12px;
        padding: 0;
        height: 13px;
      }
      .img-text {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .img-div {
          width: 99px;
          height: 136px;
          background: #446583;
          display: flex;
          align-items: center;
          padding: 5px;
          box-sizing: border-box;
          span {
            display: block;
            margin: 0 auto;
            width: 12px;
            color: #fff;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text-right {
          margin-left: 18px;
          background: #f6f5f5;
          padding: 6px 12px;
          flex: 1;
          box-sizing: border-box;
          input {
            background: #f6f5f5;
          }
          p {
            margin-bottom: 10px;
            // height: 10px;
            color: #999999;
          }
        }
      }
      .chiz {
        display: flex;
        align-items: top;
        justify-content: flex-start;
        margin-top: 15px;
        margin-bottom: 13px;
        span {
          display: inline-block;
          color: #ff9797;
          font-size: 12px;
          width: 60px;
        }
        input {
          color: #ff9797;
          flex: 1;
        }
      }
      .qianfa {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        span {
          color: #999999;
          width: 70px;
        }
        a {
          font-size: 14px;
          flex: 1;
        }
        input {
          flex: 1;
        }
      }
      .qfdw {
        position: relative;
      }
      .zhang {
        position: absolute;
        right: -26px;
        top: -62px;
        width: 150px;
        height: 150px;
        z-index: 10000;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .anquan {
        margin-top: 17px;
        border-top: 1px solid #e9e9e9;
        padding-top: 10px;
        p {
          font-size: 12px;
          color: #999999;
        }
        ul {
          padding-left: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          li {
            width: 33%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            i {
              display: block;
            }
            i:first-child {
              width: 41px;
              height: 41px;
              background: url('../../../assets/gm.png') no-repeat center;
              background-size: 41px 41px;
            }
            i:last-child {
              width: 12px;
              height: 12px;
              background: url('../../../assets/xz.png') no-repeat center;
              background-size: 12px 12px;
            }
            p {
              line-height: 1;
              font-size: 12px;
              color: #999999;
              margin: 9px 0 3px;
            }
          }
        }
      }
    }
  }
}
.zjStyle-content-footer {
  margin-top: 13px;
  width: 335px;
  padding: 21px 16px 17px;
  background: #ffffff;
  box-shadow: 3px 3px 7px 3px rgba(8, 8, 8, 0.1);
  border-radius: 10px;
  font-size: 12px;
  &-qf:first-child {
    margin-bottom: 10px;
  }
  &-qf {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  span {
    line-height: 1;
    margin-right: 25px;
    color: #6e6e6e;
  }
  input {
    border: none;
    flex: 1;
    padding: 0;
    height: 14px;
  }
}
.zjzcj {
  line-height: 20px;
  margin-bottom: 0;
  color: #999999;
  padding-left: 27px;
}
.yx {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}
.bcbtn {
  width: 100px;
}
.bcbtn:first-child {
  margin-right: 20px;
}
.fz-span {
  display: block;
  height: 100%;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.djsc {
  width: 100px;
}
.qz-details {
  .qz-details-div {
    margin-bottom: 30px;
    display: flex;
    align-items: top;
    justify-content: flex-start;
    span {
      font-size: 14px;
      line-height: 1;
      display: inline-block;
      color: #333333;
    }
    span:first-child {
      width: 30%;
      color: #999;
      text-align: right;
      margin-right: 20px;
    }
    span:last-child {
      flex: 1;
    }
  }
  .qz-details-div:first-child {
    margin-top: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
}
.card-span2 {
  width: 212px !important;
  overflow: hidden;
  display: block !important;
}
</style>